Efecto Pop-Up con CSS

Hace unos días Zoom - Info nos permitía la opción de mostrar texto oculto en una imagen con un efecto muy atractivo, era necesario utilizar jQuery y tuvo muy buena acogida tanto es así que surgieron nuevas ideas para poner en práctica.

• 
  

  Nata con fresas

  
  (cuatro personas)
  400 gramos de fresas.
  200 gramos de azúcar.
  1/2 litro de nata líquida.
  1 limón.
  

Sin duda los efectos creados con jQuery son fantásticos pero personalmente prefiero hacer uso de CSS antes que utilizar scripts siempre que sea posible claro.

En SOHTANAKA nos muestran que con CSS casi todo es posible y han creado un ejemplo que me ha recordado mucho Zoom - Info, el efecto quizás no sea tan elegante pero es una opción más para escoger.

Partiendo de esa misma idea he pensado que podría servir para mostrar información oculta en una única imagen quizás para mostrar en una entrada del blog, o en las páginas estáticas.

Primero añadimos los estilos antes de ]]></b:skin>

/* Texto oculto */
ul.columns {
width: 240px; /* ancho de la columna*/
list-style: none;
margin: 0 auto;
padding: 0;
float: left;
}
ul.columns li {
width: 220px;
float: left;
display: inline;
margin: 10px;
padding: 0;
position: relative;
}
ul.columns li:hover {
z-index: 99;
}
ul.columns li img {
background:#000; /* color de fondo */
position: relative;
filter: alpha(opacity=30);opacity: 0.5;  /* grado de opacidad */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
ul.columns li:hover img{
z-index: 999;
filter: alpha(opacity=100);opacity: 1;  /* opacidad al pasar el cursor */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
ul.columns li .info {
position: absolute;
left: -5px; top: -10px;
padding: 210px 10px 20px;
width: 220px; /* ancho del texto */
display: none;
background: #000;  /* color de fondo del texto */
font-size: 1.2em;  /* Tamaño de fuente */
-webkit-border-radius: 5px;  /* esquinas redondeadas  */
-moz-border-radius: 5px; /* esquinas redondeadas  */
border-radius: 5px; /* esquinas redondeadas  */
color:#fff;  /* color del texto */
}
ul.columns li:hover .info {
display: block;
}
ul.columns li h2 {
font-size: 15px; /* Tamaño del título */
font-weight:bold;
text-transform: uppercase;
margin: 0;
padding: 10px 0;
color:#fff; /* Color del título */
}
ul.columns li p {
padding: 0;
margin: 0;
font-size: 0.9em;
}

Luego, donde vamos a mostrar la imagen:

<div style=" margin: 10px auto; height: 200px; width: 200px;">
<ul class="columns"><li><a href="url-enlace"><img alt="" src="url-imagen" /></a>
<div class="info">
<h2>Título</h2>
Texto del contenido
</li></ul></div></div>

• En url-enlace añadimos la url del sitio si que deseamos enlazar, si no deseamos que sea un enlace eliminamos la línea: <a href="url-enlace">
• En url-imagen añadimos la url de nuestra imagen que para este ejemplo debe medir 220X200
• En Título añadimos el título, y en Texto del contenido, el texto.